<template>
  <div
    style="
      padding-top: 80px;
      display: inline-block;
      height: 597px;
      overflow-y: auto;
    "
    class="article"
  >
    <!-- 狗狗 -->
    <!-- 类型 -->
    <div class="type">
      <em></em>
      <h2>狗狗</h2>
      <div class="more">
        <a
          target="_blank"
          href="http://www.boqii.com/pet-all/dog/"
          style="text-decoration: none; color: #1890ff"
          >更多 »</a
        >
      </div>
    </div>
    <!-- 数据 -->
    <div>
      <ul style="list-style: none; display: flex; flex-wrap: wrap">
        <li
          style="margin-top: 20px; flex: 1"
          v-for="item in dogs"
          :key="item.id"
        >
          <div>
            <el-image
              :src="item.img"
              style="width: 200px; height: 160px; border-radius: 20%"
              class="float-div"
              @click="push(item.id)"
            ></el-image>
            <h3 style="text-align: center">{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
    <!-- 猫猫 -->
    <!-- 类型 -->
    <div class="type">
      <em style="background-position: -53px 0"></em>
      <h2>猫猫</h2>
      <div class="more">
        <a
          target="_blank"
          href="http://www.boqii.com/pet-all/dog/"
          style="text-decoration: none; color: #1890ff"
          >更多 »</a
        >
      </div>
    </div>
    <!-- 数据 -->
    <div>
      <ul style="list-style: none; display: flex; flex-wrap: wrap">
        <li
          style="margin-top: 20px; flex: 1"
          v-for="item in cats"
          :key="item.id"
        >
          <div>
            <el-image
              :src="item.img"
              style="width: 200px; height: 160px; border-radius: 20%"
              class="float-div"
              @click="push(item.id)"
            ></el-image>
            <h3 style="text-align: center">{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
    <!-- 小宠 -->
    <!-- 类型 -->
    <div class="type">
      <em style="background-position: -134px 0"></em>
      <h2>小宠</h2>
      <div class="more">
        <a
          target="_blank"
          href="http://www.boqii.com/pet-all/dog/"
          style="text-decoration: none; color: #1890ff"
          >更多 »</a
        >
      </div>
    </div>
    <!-- 数据 -->
    <div>
      <ul style="list-style: none; display: flex; flex-wrap: wrap">
        <li
          style="margin-top: 20px; flex: 1"
          v-for="item in minPets"
          :key="item.id"
        >
          <div>
            <el-image
              :src="item.img"
              style="width: 200px; height: 160px; border-radius: 20%"
              class="float-div"
              @click="push(item.id)"
            ></el-image>
            <h3 style="text-align: center">{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
    <!-- 水族 -->
    <!-- 类型 -->
    <div class="type">
      <em style="background-position: -199px 0"></em>
      <h2>水族</h2>
      <div class="more">
        <a
          target="_blank"
          href="http://www.boqii.com/pet-all/dog/"
          style="text-decoration: none; color: #1890ff"
          >更多 »</a
        >
      </div>
    </div>
    <!-- 数据 -->
    <div>
      <ul style="list-style: none; display: flex; flex-wrap: wrap">
        <li
          style="margin-top: 20px; flex: 1"
          v-for="item in waters"
          :key="item.id"
        >
          <div>
            <el-image
              :src="item.img"
              style="width: 200px; height: 160px; border-radius: 20%"
              class="float-div"
              @click="push(item.id)"
            ></el-image>
            <h3 style="text-align: center">{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
    <!-- 爬虫 -->
    <!-- 类型 -->
    <div class="type">
      <em style="background-position: -278px 0"></em>
      <h2>爬虫</h2>
      <div class="more">
        <a
          target="_blank"
          href="http://www.boqii.com/pet-all/dog/"
          style="text-decoration: none; color: #1890ff"
          >更多 »</a
        >
      </div>
    </div>
    <!-- 数据 -->
    <div>
      <ul style="list-style: none; display: flex; flex-wrap: wrap">
        <li
          style="margin-top: 20px; flex: 1"
          v-for="item in reptiles"
          :key="item.id"
        >
          <div>
            <el-image
              :src="item.img"
              style="width: 200px; height: 160px; border-radius: 20%"
              class="float-div"
              @click="push(item.id)"
            ></el-image>
            <h3 style="text-align: center">{{ item.name }}</h3>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//请求
import request from "@/utils/request";

export default {
  name: "Science",
  components: {},
  data() {
    return {
      dogs: [],
      cats: [],
      minPets: [],
      waters: [],
      reptiles: [],
    };
  },
  mounted() {},
  created() {
    this.load();
  },
  watch: {},
  methods: {
    //查询百科信息
    async load() {
      const types = ["狗狗", "猫猫", "小宠", "水族", "爬虫"];
      const pageSize = 14;

      types.forEach((type) => {
        const url = `/science/getByType?type=${type}&pageNum=1&pageSize=${pageSize}`;
        request.get(url).then((res) => {
          switch (type) {
            case "狗狗":
              this.dogs = res.data.list;
              break;
            case "猫猫":
              this.cats = res.data.list;
              break;
            case "小宠":
              this.minPets = res.data.list;
              break;
            case "水族":
              this.waters = res.data.list;
              break;
            case "爬虫":
              this.reptiles = res.data.list;
              break;
            default:
              break;
          }
        });
      });
    },

    push(id) {
      this.$router.push(`/user/scienceDetail?id=${id}`);
    },
  },
};
</script>

<style scoped>
.type {
  border-bottom: 3px solid #1890ff;
  position: relative;
}
.type em {
  font-size: 12px;
  display: block;
  width: 33px;
  height: 54px;
  background: url("@/assets/common.png") no-repeat 0 0;
  margin: 0 0 0 4px;
}
.type h2 {
  margin: 0;
  padding: 0;
  font: 24px/44px "Microsoft YaHei";
  color: #fff;
  background: #1890ff;
  text-align: center;
  position: absolute;
  left: 37px;
  bottom: 0;
  line-height: 44px;
  width: 120px;
}
.more {
  font: 16px/44px "Microsoft YaHei";
  position: absolute;
  text-decoration: none;
  right: 0;
  bottom: 0;
}
.article {
  font-size: 12px;
  color: #000;
  font-family: Arial, Helvetica, sans-serif, "Microsoft YaHei";
  margin-top: 5px;
  display: inline-block;
  zoom: 1;
  width: 100%;
}
/* 浮动动画 */
.float-div {
  animation: floatAnimation 3s infinite ease-in-out; /* 持续浮动的动画 */
  cursor: pointer;
}
.float-div:hover {
  animation-play-state: paused; /* 鼠标移入时停止动画 */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /*起到一个强调的效果*/
}
@keyframes floatAnimation {
  0% {
    transform: translate(0px, 0px); /* 初始位置 */
  }
  50% {
    transform: translate(-5px, -5px); /* 向左上方浮动 */
  }
  100% {
    transform: translate(0px, 0px); /* 回到初始位置 */
  }
}
</style>
